<template>
    <div>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.inverterSn')}}</span>
                <el-input v-big v-model="searchData.inverterSn" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.wifiSn')}}</span>
                <el-input v-big v-model="searchData.wifiSn" clearable @change="toUpperCase"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)" :column='column'>
            <template #option="{data}">
                <div class="option-box">
                    <el-button icon="el-icon-document" :title="$t('index.js_seeDetails')" @click='goAlarmRecord(data)'></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable,
    },
    props: {

    },
    data() {
        return {
            deviceType:'',
            searchData:{
                inverterSn:'',
                wifiSn:'',
            },
            deviceTypes:[],
            alarmTypes:[],
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('test.deviceTest.inverterSN'),
                value: 'inverterSn',
            },{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSn'
            },{
                title: this.$t('user.loginName'),
                value: 'loginName'
            },{
                title: this.$t('agent'),
                value: 'agentName'
            },{
                title: this.$t('firm'),
                value: 'firmName'
            },{
                title: this.$t('alarm.alarmEquipment.numcount'),
                value: 'alarmCount'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.initTable()
    },
    methods: {
        toUpperCase(val){
            this.searchData.wifiSn=val.toUpperCase()
        },
        goAlarmRecord(data){
            this.$router.push({ path: '/alarmRecord', query: {wifiSn: data.wifiSn} })
        },
        async initTable(){
            this.loading = true
            let res = await this.API.showAlarmEquipment({
                size: this.size,
                current: this.current,
                ...this.searchData
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        }
    },
};
</script>

<style lang="less">
.alarm-container{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    font-size: 14px;
    .right-menu-box{
        flex: 1;
    }
    .selectItem{
        span{
            display:block;
            padding: 5px;
            font-size: 13px;
        }
        &:hover,&.active{
            background:#FEA429;
            cursor: pointer;
        }
    }
}

</style>
